Advanced Game Design With HTML5 and JavaScript by Rex van Der Spuy

Author:Rex van Der Spuy [Spuy, Rex van Der]
Language: eng
Format: epub
Tags: Web, Computers, Programming, Web Programming, Games
ISBN: 9781430258018
Google: TU0nCgAAQBAJ
Publisher: Apress
Published: 2015-05-06T20:39:22+00:00

There’s some really interesting stuff going on here that brings together many techniques that you’ve learned in the book so far. Let's go on a step-by-step tour of how this game prototype was made.

Making the Marbles

How is each marble made? The marbles are actually images from a single tileset image called marbles.png, shown in Figure 7-6. Each tile is 32 by 32 pixels.

Figure 7-6.The marbles tileset

The game uses only the first two rows of images: the six colored circles. In Chapter 4 you learned how to use the frames function to capture multiple images on a tileset. Here’s how to use it to capture references to all six colored circles:

let marbleFrames = frames(

assets["images/marbles.png"], //The tileset image

[

[0,0],[32,0],[64,0], //A 2D array that defines the

[0,32],[32,32],[64,32] //x and y image positions

],

32, 32 //The width and height of each image

);

You can now initialize a sprite using these frames:

let marble = sprite(marbleFrames);

The marble sprite now has references to all six image frames, and you can display any of them by using gotoAndStop. Here’s how to use randomInt to make the marble display a random frame:

marble.gotoAndStop(randomInt(0, 5));

Set the marble’s circular property to true so that it will have the diameter and radius properties that the collision function needs:

marble.circular = true;

What if you want to give the marble a random diameter? Create an array of sizes and randomly assign one to the marble’s diameter property:

let sizes = [8, 12, 16, 20, 24, 28, 32];

marble.diameter = sizes[randomInt(0, 6)];

Of course, you’re not just making one marble—the game prototype has 25 of them. So it makes sense to initialize them in a grid. Here’s all the code from the game’s setup function that uses the grid function to create all 25 marble sprites.

marbles = grid(

//Set the grid's properties

5, 5, 64, 64,

true, 0, 0,

//A function that describes how to make each marble

() => {

let marbleFrames = frames(

assets["images/marbles.png"],

[

[0,0],[32,0],[64,0],

[0,32],[32,32],[64,32]

],

32, 32

);

//Initialize a marble with the frames

let marble = sprite(marbleFrames);

//Set the marble to a random frame

marble.gotoAndStop(randomInt(0, 5));

//Give it circular properties (`diameter` and `radius`)

marble.circular = true

//Give the marble a random diameter

let sizes = [8, 12, 16, 20, 24, 28, 32];

marble.diameter = sizes[randomInt(0, 6)];

//Give it a random initial velocity

marble.vx = randomInt(-10, 10);

marble.vy = randomInt(-10, 10);

//Assign the rest of the marble's physics properties

marble.frictionX = 0.99;

marble.frictionY = 0.99;

marble.mass = 0.75 + (marble.diameter / 32);

//Return the marble sprite so that it can

//be added to the grid cell

return marble;

}

);

You can see in this code that the marbles are also assigned random initial velocities, from –10 to 10:

marble.vx = randomInt(-10, 10);

marble.vy = randomInt(-10, 10);

That means they’ll fly away in different directions as soon as their positions are updated in the game loop. The code also works out each marble’s mass:

marble.mass = 0.75 + (marble.diameter / 32);

Lighter marbles with less mass will bounce apart with greater speed than heavier marbles with more mass.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.